<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<style>
     .myColor:nth-child(odd) {
     background-color:gainsboro;
     }
     #Myloading2{
         position: relative;
         left: 46%;
         margin-top: 21%;
     }
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="Myloading2"><img src="../../lib/layui-v2.5.5/css/modules/layer/default/loading-01.gif" alt=""></div>
<!-- 显示地图 -->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12">
                <div id="echarts-pies" style="background-color:#ffffff;min-height:585px;padding: 10px"></div>
            </div>
        </div>
    </div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../lib/dateTime/jquery-1.8.3.min.js"></script>
<script src="../../lib/dateTime/bootstrap-datetimepicker.min.js"></script>
<script src="../../lib/dateTime/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../../js/jquery.table2excel.min.js"></script>
<script>
    layui.use(['layer','echarts'], function () {

                        // 2020-03-25 HF sessionStorage中取出数据
                        var token = sessionStorage.getItem('newtoken');
                        var Flowmeter =JSON.parse(sessionStorage.getItem('SaveFmeter'));
                        var FlowTime =JSON.parse(sessionStorage.getItem('SaveTimeFlow'));
                        var loading = layer.load(0);

                        var $ = layui.jquery,
                            echarts = layui.echarts;
                            $('#Myloading2').remove();
                        /*************曲线图初始化*******************/
                            $.ajax({          
                                    url: '/oms-web/flowMeter/value?token='+ token + '&rtuno=' +  Flowmeter.termNumber + '&time=' + FlowTime.time,
                                    dataType:"json",  
                                    type:"get", 
                                    contentType:"application/json",
                                        success:function(data){ if (data.code == -1) {
                          window.location = '../login-1.html'
                      }
                                        if(data.code === 0){
                                           //loading加载动画
                                            layer.close(loading);
                                            if(data.data != null && data.data != undefined){
                                                /***********/
                                                var b = [];
                                                for (let index = 1; index < 81; index++) {
                                                   b.push(index);
                                                }
                                                /***********/
                                                var l = [],
                                                    n,
                                                    k,
                                                    w;
                                               
                                                for(let key in data.data){
                                                     l.push( data.data[key].text);
                                                     if(data.data[key].pointno === 1 && data.data[key].text == '流量'){
                                                           var n = data.data[key].values;
                                                     }else if(data.data[key].pointno === 2 && data.data[key].text == '流速'){
                                                           var k = data.data[key].values;
                                                     }else if(data.data[key].pointno === 3 && data.data[key].text == '流量计输出值'){
                                                           var w = data.data[key].values;
                                                     }     
                                                }
                                                  getHcurve(l,n,b,k,w);
                                    }
                                }
                            },
                                    error:function () {
                                        layer.msg("数据请求错误,请检查时间格式！");
                                            layer.close(index);
                                    }
                            // ****************************************//
                        });

                        
                        /**********************************************/
                        // 曲线
                        function getHcurve (l,n,b,k,w){

                        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');

                            option = {
                                        title: {
                                            text: '流量计折线图'
                                        },
                                        tooltip: {
                                            trigger: 'axis'
                                        },
                                        legend: {
                                            data: l
                                        },
                                        grid: {
                                            // top:60,
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            containLabel: true
                                        }, 
                                         toolbox: {
                                                right: '20px',
                                                feature: {
                                                    dataView: {
                                                        show: true,
                                                        title: '数据视图',
                                                        //readOnly: true, //设置只读，会隐藏刷新按钮。
                                                        lang: ['数据视图', '关闭', '导出Excel'],
                                                        contentToOption: function (opts) {
                                                            $("#tableExcel_Day").table2excel({
                                                                exclude: ".noExl", //过滤位置的 css 类名
                                                                filename:  '流量计走势图' + ".xls", //文件名称
                                                                name: "Excel Document Name.xls",
                                                                exclude_img: true,
                                                                exclude_links: true,
                                                                exclude_inputs: true
                                                            });
                                                        },
                                                        optionToContent: function (opt) {
                                                            var axisData = opt.xAxis[0].data; //坐标数据
                                                            var series = opt.series; //折线图数据
                                                            
                                                            var tdHeads = '<td  style="padding: 5px 10px">名称-序号</td>'; //表头第一列
                                                            var tdBodys = ''; //表数据
                                                            //组装表头
                                                            for (var i = 0; i < series.length; i++) {
                                                                tdHeads += '<td style="padding: 5px 10px">' + series[i].name + '</td>';
                                                            }
                                                            var table = '<table id="tableExcel_Day" border="1" style="width:100%;text-align:center" ><tbody><tr style="background:coral;">' + tdHeads + ' </tr>';
                                                            //组装表数据
                                                            for (var i = 0, l = axisData.length; i < l; i++) {
                                                                for (var j = 0; j < series.length ; j++) {
                                                                    var temp = series[j].data[i];
                                                                    if (temp != null && temp != undefined) {
                                                                        tdBodys += '<td>' + parseFloat(temp) + '</td>';
                                                                    } else {
                                                                        tdBodys += '<td></td>';
                                                                    }
                                                                }
                                                                table += '<tr class="myColor"><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                                                tdBodys = '';
                                                            }
                                                            table += '</tbody></table>';
                                                            return table;
                                                        }
                                                    },
                                                    saveAsImage: {backgroundColor:'#fff'}
                                              }
                                        },
                                        xAxis: {
                                            type: 'category',
                                            boundaryGap: false,
                                            data: b,
                                            axisLabel:{
                                            interval:'auto',
                                            rotate:"45"
                                            }
                                        },
                                        dataZoom: [
                                        {
                                            type: 'inside',
                                            realtime: true,
                                            start: 0,
                                            end: 100
                                        },
                                        {
                                            type: 'slider',
                                            realtime: true,
                                            start: 0,
                                            end: 100
                                        }],
                                        yAxis: {
                                            type: 'value'
                                        },
                                        series: [
                                            {
                                                name: l[0],
                                                type: 'line',
                                                showSymbol: false,
                                                // stack: '总量',
                                                data: n
                                            },
                                            {
                                                name: l[1],
                                                type: 'line',
                                                showSymbol: false,
                                                // stack: '总量',
                                                data: k
                                            },
                                            {
                                                name: l[2],
                                                type: 'line',
                                                // symbolSize: 5,   //设定实心点的大小
                                                showSymbol: false,
                                                // stack: '总量',
                                                data: w
                                            }
                                        ]
                                    };


                            echartsPies.setOption(option);
                        };

                        /**********************************************/
         });




</script>

</body>
</html>